<!doctype html>
<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>Style Links Test</title>
  <script src="../../tools/htmltest.js"></script>
  <script src="../../tools/chai/chai.js"></script>
  <script src="../../../src/HTMLImports/HTMLImports.js"></script>
  <link rel="import" href="imports/style-links-import.html">
  <style>
    .overridden {
      background-color: black;
    }
  </style>
  <link rel="import" href="imports/style-elements-import.html">
  <style>
    .overridden-style {
      background-color: black;
    }
  </style>
</head>
<body>
  <div class="red">red?</div>
  <div class="blue">white?</div>
  <div class="orange">orange?</div>

  <div class="overridden">black?</div>

  <div class="styled">red?</div>
  <div class="overridden-style">black?</div>


  <script>
    addEventListener('HTMLImportsLoaded', function() {

      // NOTE: IE requires asynchrony here
      setTimeout(function() {
        var imp = document.head.querySelector('link[rel=import]');
        chai.assert.ok(imp.import, 'import has content');

        function computedStyle(selector) {
          return getComputedStyle(document.querySelector(selector));
        }
        // styles in stylesheets are applied
        chai.assert.equal(computedStyle('.red').backgroundColor, 'rgb(255, 0, 0)');
        chai.assert.equal(computedStyle('.orange').backgroundColor, 'rgb(255, 165, 0)');
        chai.assert.equal(computedStyle('.blue').backgroundColor, 'rgb(0, 0, 255)');
        // styles in stylesheets are applied in the correct order and overriddable
        chai.assert.equal(computedStyle('.overridden').backgroundColor, 'rgb(0, 0, 0)');
        // styles in style elements are applied
        chai.assert.equal(computedStyle('.styled').backgroundColor, 'rgb(255, 0, 0)');
        // styles in style are applied in the correct order and overriddable
        chai.assert.equal(computedStyle('.overridden-style').backgroundColor, 'rgb(0, 0, 0)');


        done();
      });
    });
  </script>
</body>
</html>
